<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台管理登录界面</title>
    <style type="text/css">
        .yzm{
            border:1px solid red;
            width:95px;
            height:30px;

        }
        .lidiv{
            border:1px solid red;
            width:315px;
            height:90px;
        }
        input {
            outline: medium;
        }
        #input1{
            border-radius: 5px;
            border: 1px solid #9CD0E1;
            height: 28px;
            margin-top: -1px;
            padding-left: 11px;
        }
        .inputs{
            width: 215px;
            height: 35px;
            margin-left:52px;
            margin-top: -39px;
        }
        .yzms{
            width: 100px;
            height: 30px;
            float: right;
        }
        #sub{
            width: 100px;
            height: 33px;
            margin-left: -2px;
            margin-top: 10px;
            border-radius: 5px;
            border: 1px solid #9CD0E1;
            background-color: #0093DD;
            color: #fff;cursor: pointer;
        }
        #sub:hover{
            opacity:0.8;
        }

        .zz{
            width: 200px;
            height: 25px;
            position: relative;
            left:55px;
            top:15px;
            font-size: 14px;
            color:red;
        }
    </style>
    <link href="__ROOT__/static/admin/css/alogin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" action="{:url('Index/login')}" method="post" onsubmit="return user2()">
    <div class="Main">
        <ul>
            <li class="top"></li>
            <li class="top2"></li>
            <li class="topA"></li>
            <li class="topB"><span><img style="position:relative;top:-25px;" src="__ROOT__/static/admin/images/login/zskj.jpg" alt=""  /></span></li>
            <li class="topC"></li>
            <li class="topD">

                    <ul class="login"  style="margin-top:-16px">
                        <div class="zz" >
                            <span id="zzbds"></span>
                        </div>
                        <li>
                            <span class="left login-text">用户名：</span>
							<span style="left">
								<input id="Text1" style="border-radius: 5px;" onfocus="user1()" onblur="user2()" type="text" class="txt" name="username" placeholder="请输入用户名"/>
							</span>
                        </li>
                        <li>
                            <span class="left login-text">密码：</span>
							<span style="left">
								<input id="Text2" style="border-radius: 5px;" onfocus="pwd1()" onblur="pwd2()" type="password" class="txt" name="password" placeholder="请输入密码"/>
							</span>
                        </li>
                    </ul>
            </li>
            <li class="topE"></li>
            <li class="middle_A"></li>
            <li class="middle_B" style="z-index:0"></li>
            <li class="middle_C">
                <span class="left login-text">验证码：</span>
								<span style="left">
                                    <div class="inputs">
									    <input id="input1" onfocus="yzm1()" onblur="yzm2()" style=" border-radius: 5px;width:100px;margin-left: 1px;" type="text"  name="pwd" placeholder="请输入验证码"/>
								        <div class="yzms">
                                            <img src="__ROOT__/static/admin/images/login/20171025111003.jpg" style="width: 100px;height: 29px;cursor: pointer; ">
                                        </div>
                                    </div>
                                </span>
                <span class="btn">
                    <input name="" id="sub" type="submit"  value="登录" />
                </span>
            </li>
</form>
            <li class="middle_D"></li>
            <li class="bottom_A"></li>
            <li class="bottom_B">众山科技后台管理系统&nbsp;&nbsp;</li>
        </ul>
    </div>
</form>
<!---->
</body>
<script>
    //用户焦点
    function user1(){
        var userA = document.getElementById("Text1").placeholder="";
    }
    function user2(){
        var userA = document.getElementById("Text1").placeholder="请输入用户名";
        var userB = document.getElementById('zzbds').innerHTML='';
        var userC = document.getElementById("Text1").value;
        if(userC==''){
            document.getElementById("zzbds").innerHTML='账户不能为空';
            document.getElementById('Text1').style.border="1px solid red";
            return false;
        }else{
            document.getElementById('Text1').style.border="";
        }
    }
    //密码焦点
    function pwd1(){
        var pwds = document.getElementById("Text2").placeholder="";
    }
    function pwd2(){
        var pwdA = document.getElementById("Text2").placeholder="请输入密码";
        var pwdB = document.getElementById('zzbds').innerHTML='';
        var pwdC = document.getElementById("Text2").value;
        if(pwdC==''){
            document.getElementById("zzbds").innerHTML='密码不能为空';
            document.getElementById('Text2').style.border="1px solid red";
            return false;
        }else{
            document.getElementById('Text2').style.border="";
        }
    }
    //验证码焦点
    function yzm1(){
        var yzms = document.getElementById("input1").placeholder="";
    }
    function yzm2(){
        var yzmA = document.getElementById("input1").placeholder="请输入验证码";
        var yzmB = document.getElementById('zzbds').innerHTML='';
        var yzmC = document.getElementById("input1").value;
        if(yzmC==''){
            document.getElementById("zzbds").innerHTML='验证码不能为空';
            document.getElementById('input1').style.border="1px solid red";
            return false;
        }else{
            document.getElementById('input1').style.border="";
        }
    }
</script>
</html>